<!-- 
  @name: 我的团队
  @date: 2020.1.9
 -->
<template>
	<view class="content">
		<!-- 选项卡 -->
		<view class="fixed_top">
			<tab-card line-width="100%" ref="tabCard" :tab-list="tabList" @click-item="onClickItem"></tab-card>
		</view>
		
		<!-- 创建的团队 -->
		<view class="created-team" v-show="tabIndex === 0">
			<view class="fixed_top view2">
				<!-- 添加 -->
				<view class="add">
					<view class="input">
						<input type="number" placeholder="请输入手机号码" placeholder-class="phcolor" v-model.trim="phoneNum" />
					</view>
					<button class="btn_submit_sm" @tap="addSearch">添加</button>
				</view>
				<!-- 操作 -->
				<view class="separate_line"></view>
				<view class="handle">
					<view class="left">团队成员</view>
					<view class="right" @tap="editSel" v-text="isSelect ? '取消' : '编辑'"></view>
				</view>
			</view>
			
			<!-- 列表 -->
			<view class="created-list" :class="isSelect ? 'h2' : ''">
				<uni-swipe-action>
					<uni-swipe-action-item
						v-for="(item, index) in createdList"
						:options="options"
						:key="item.userId"
						@click="swipeClick(item, index)">
						<view class="created-item">
							<view class="created-item-1">
								<view
									class="check_box"
									:class="item.isSelect ? '_ck1' : '_ck2'"
									v-show="isSelect"
									@tap="changeSel(item, index)"></view>
								<image class="img" :src="item.userPhoto"></image>
								<view class="msg">
									<view>{{item.userName}}</view>
									<view class="t1">{{item.userPhone}}</view>
								</view>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
			<!-- 底部加载提示 -->
			<btm-load></btm-load>
		</view>
		
		<!-- 全选 -->
		<view class="bottom_view" v-show="isSelect">
			<view
				class="check_box"
				:class="allSelect ? '_ck1' : '_ck2'"
				@tap="changeAllSel"></view>
			<text class="text">全选</text>
			<button class="btn_submit_sm" @tap="selectDelete">删除</button>
		</view>
		
		<!-- 所在的团队 -->
		<view class="join-team" v-show="tabIndex === 1">
			<view class="team-msg" v-if="!teaminfo.userName"></view>
			<view class="team-msg" v-else>
				<image class="img" :src="teaminfo.userPhoto"></image>
				<view class="msg">
					<view>{{teaminfo.userName}}</view>
					<view class="t1">{{teaminfo.userPhone}}</view>
					<!-- <view class="t1">余额：{{teaminfo.userBalance}}元</view> --> 
				</view>
				<view class="btn" @tap="removeBind">解除绑定</view>
			</view>
		</view>
		
		<!-- 弹窗，用于展示搜索到的成员信息 -->
		<view class="_popup center" v-if="showSearch">
			<view class="popup-info">
				<view class="msg">您输入的用户为：</view>
				<view class="msg t1 t2">
					<image class="icon" :src="searchInfo.userPhoto"></image>
					<text class="name">{{searchInfo.userName}}</text>
				</view>
				<view class="msg t1">是否添加该用户为团队成员？</view>
				<view class="btn_view_popup">
					<view class="_cancle" @tap="showSearch = false">取消</view>
					<view class="_submit" @tap="doAdd">确定</view>
				</view>
			</view>
		</view>
		
		<!-- 登录提示 -->
		<sign-in @submit="reLogin"></sign-in>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: ['创建的团队', '所在的团队'],  //选项卡
				tabIndex: 0,  //选项卡初始面板
				options: [{
					text: '删除',
					style: {
						backgroundColor: 'rgba(255,153,0)'
					}
				}],  //滑动扩展菜单
				userId: '',  //用户自己的id
				isOwner: 0,  //用户的团队身份，0-无团队，1-有团队不是队长，2-团队长
				createdList: [],  //创建的团队
				isSelect: false,  //是否处于选择状态
				allSelect: false,  //是否全选
				selectList: [],  //选择后的集合
				page: 1,  //页码
				teaminfo: {},  //加入的团队信息(团队长)
				phoneNum: '',  //添加人员时输入的手机号
				searchInfo: {},  //搜索到的成员信息
				showSearch: false,  //是否显示搜索信息
			}
		},
		watch:{
			tabIndex(newVal) {
				this.page--;
				this.createdList = [];
				this.getList(newVal);
			}
		},
		onLoad() {
			let info = JSON.parse(this.$store.state.userinfo);
			this.isOwner = info.isOwner ? info.isOwner : 0;
			console.log(info);
			this.userId = info.userId;
			this.userPhone = info.userPhone;
			if(this.isOwner === 1) {
				this.getList(1);
			} else if(this.isOwner === 2) {
				this.getList(0);
			}
		},
		onReachBottom() {
			if(this.tabIndex === 0) {
				this.$store.commit('btmLoad', true);
				this.getList(0);
			}
		},
		onPullDownRefresh() {
			this.reLogin();
		},
		methods: {
			//重新登录
			reLogin() {
				this.createdList = [];
				this.page = 1;
				if(this.isOwner === 0) {
					uni.stopPullDownRefresh();
				} else if(this.isOwner === 1) {
					this.getList(1);
				} else if(this.isOwner === 2) {
					this.getList(0);
				}
			},
			//点击选项卡
			onClickItem(index) {
				if(this.tabIndex !== index) {
					this.tabIndex = index;
					if(this.tabIndex === 1) {
						this.isSelect = false;
						this.selectList = [];
						this.createdList.forEach(item => item.isSelect = false);
					}
				}
			},
			//执行添加或解绑后更改用户状态
			dealStatus(code) {
				this.isOwner = code;
				let info = JSON.parse(this.$store.state.userinfo);
				info.isOwner = code;
				this.$store.commit('setUserinfo', JSON.stringify(info));
			},
			//添加人员-获取人员信息
			addSearch() {
				if(this.teaminfo.userName || this.isOwner === 1) {
					//当已经被别人加入时
					uni.showModal({
					    content: '您当前已是他人团队的成员，若要创建自己的团队，请先解除绑定。'
					});
					// this.$refs.tabCard.
					this.onClickItem(1);
					return;
				}
				if(this.userPhone && this.phoneNum == this.userPhone) {
					return this.$showToast('无需添加自己为团队成员！');
				}
				if(!this.phoneNum) {
					this.$showToast('请输入手机号！');
					return;
				} else if(!this.$tmp.REG_PHONE.test(this.phoneNum)) {
					this.$showToast('请输入正确的手机号！');
					return; 
				}
				//搜索对方信息
				this.$http({
					url: this.$api.userUrl + 'getuserinfobyuserphone',
					data: {
						userPhone: this.phoneNum
					}
				}).then(res => {
					this.searchInfo = res;
					this.showSearch = true;
				});
			},
			//添加人员-执行添加操作
			doAdd() {
				this.$http({
					url: this.$api.userUrl + 'editmember',
					data: {
						action: 0,
						userId: this.searchInfo.userId
					}
				}).then(res => {
					this.phoneNum = '';
					this.searchInfo = {};
					this.showSearch = false;
					this.$successToast('添加成功');
					if(this.isOwner !== 2){ this.dealStatus(2) }
					setTimeout(() => {
						this.reLogin()
					}, this.$tmp.TIME_SUC);
				});
			},
			//解除绑定
			removeBind() {
				uni.showModal({
				    content: '确定解除该团队的绑定？',
				    success: (rs) => {
				        if (rs.confirm) {
							this.$http({
								url: this.$api.userUrl + 'removebind'
							}).then(res => {
								this.dealStatus(0);
								this.teaminfo = {};
								this.createdList = [];
								this.$successToast('已解除绑定');
							});
				        }
				    }
				});
			},
			//获取团队成员,action：0-创建的团队，1-所在的团队
			getList(action) {
				this.$http({
					url: this.$api.userUrl + 'getuserteampage',
					data: {
						action: action,
						page: this.page,
						rows: this.$tmp.ROWS_RET
					},
					loading: this.page > 1 ? 0 : ''
				}).then(res => {
					console.log(res);
					let arr = res;
					if(arr && arr.length > 0) {
						if(action === 0) {
							arr.forEach(item => item.isSelect = false);
							this.createdList = this.createdList.concat(arr);
							this.page += 1;
						} else {
							this.teaminfo = arr[0];
						}
					}
				});
			},
			//执行删除操作
			doDelete() {
				let userIds = JSON.stringify(this.selectList);
				let userId2 = JSON.stringify(this.selectList);
				userIds = userIds.replace(/\[/g, '');
				userIds = userIds.replace(/\]/g, '');
				this.$http({
					url: this.$api.userUrl + 'editmember',
					data: {
						action: 1,
						userIds: userIds
					}
				}).then(res => {
					this.selectList = [];
					this.$successToast('已删除');
					let arr = JSON.parse(userId2);
					let index = -1;
					arr.forEach(item => {
						//此处的item指的是userId
						index = this.createdList.findIndex(it => it.userId === item);
						this.createdList.splice(index, 1);
					});
				});
			},
			//点击滑动菜单(删除成员)
			swipeClick(item, index) {
				// if(item.userId === this.userId) {
				// 	this.$showToast('不能删除自己！');
				// 	return;
				// }
				uni.showModal({
				    content: '确定删除这个成员？',
				    success: (rs) => {
				        if(rs.confirm) {
							this.selectList.push(item.userId);
				            this.doDelete();
				        }
				    }
				});
			},
			//点击底部菜单删除按钮
			selectDelete() {
				if(this.selectList.length > 0) {
					let index = this.selectList.findIndex(item => item === this.userId);
					// if(index >= 0) {
					// 	this.$showToast('不能删除自己！');
					// 	return;
					// }
					uni.showModal({
					    content: '确定删除选中的成员？',
					    success: (rs) => {
					        if(rs.confirm) {
								this.doDelete();
					        }
					    }
					});
				} else {
					this.$showToast('请选择团队成员');
				}
			},
			//全选 
			changeAllSel() {
				let sel = this.allSelect;
				this.allSelect = !sel;
				if(sel) {
					//此时已在全选状态下，点击是为了取消全选
					this.selectList = [];
					this.createdList.forEach(item => {
						item.isSelect = false;
					});
				} else {
					this.createdList.forEach(item => {
						item.isSelect = true;
						this.selectList.push(item.userId);
					});
				}
			},
			//是否选择
			changeSel(item, index) {
				let sel = this.createdList[index].isSelect;
				this.createdList[index].isSelect = !sel;
				if(sel) {
					//此时已在选择状态下，点击是为了取消选择
					let m = this.selectList.indexOf(item.userId);
					this.selectList.splice(m, 1);
					this.allSelect = false;
				} else {
					this.selectList.push(item.userId);
					if(this.selectList.length === this.createdList.length) {
						this.allSelect = true;
					} else {
						this.allSelect = false;
					}
				}
			},
			//点击编辑或取消
			editSel() {
				let sel = this.isSelect;
				this.isSelect = !sel;
				if(sel) {
					//点击取消按钮
					this.selectList = [];
					this.createdList.forEach(item => item.isSelect = false);
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $color-white;
	}
	
	/* 创建的团队 */
	.created-team {
		width: 750rpx;
		.fixed_top.view2 {
			top: $tab-card-heg;
		}
		.add {
			width: 100%;
			height: 130rpx;
			padding: 0 40rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.input {
				flex: 1;
				height: 70rpx;
				padding: 0 20rpx;
				padding-top: 11rpx;
				background-color: #F5F5F5;
				border-radius: $border-radius-bm;
			}
			.btn_submit_sm {
				width: 89rpx;
				height: 51rpx;
				line-height: 50rpx;
				margin-left: 50rpx;
			}
		}
		.handle {
			width: 670rpx;
			height: 90rpx;
			margin: 0 40rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 1rpx solid $color-list;
			.left {
				flex: 1;
			}
			.right {
				color: $color-primary;
			}
		}
	}
	.created-list.h2 {
		margin-bottom: 110rpx;
	}
	.created-list {
		width: 100%;
		height: auto;
		padding-left: 40rpx;
		margin-top: $spacing-col + $tab-card-heg + 220rpx;
		background-color: $color-white;
		.btm-load {
			margin-left: -40rpx;
		}
		.created-item {
			width: 100%;
			padding-right: 40rpx;
			.created-item-1 {
				width: 100%;
				padding: 40rpx 0;
				border-bottom: 1rpx solid $color-list;
				display: flex;
				flex-direction: row;
				align-items: center;
				.check_box {
					margin-right: 30rpx;
				}
				.img {
					width: 90rpx;
					height: 90rpx;
					border-radius: $border-radius-circle;
				}
				.msg {
					flex: 1;
					padding-left: 29rpx;
					.t1 {
						margin-top: 20rpx;
						font-family: $font-family-num;
					}
				}
			}
		}
	}
	
	/* 全选 */
	.bottom_view {
		width: 750rpx;
		height: 110rpx;
		padding: 0 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		.text {
			flex: 1;
			margin-left: 30rpx;
			color: $color-grey-dark;
			font-size: 30rpx;
		}
	}
	
	/* 添加成员时，搜索到的信息展示弹窗 */
	.popup-info {
		width: 600rpx;
		background-color: $color-white;
		border-radius: $border-radius-lg;
		text-align: center;
		.msg {
			width: 100%;
			margin-top: 40rpx;
			.icon {
				width: 80rpx;
				height: 80rpx;
				border-radius: $border-radius-circle;
			}
			.name {
				margin-left: 30rpx;
			}
		}
		.msg.t1 {
			margin-top: 30rpx;
		}
		.msg.t2 {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}
		.btn_view_popup {
			margin-top: 50rpx;
		}
	}
	
	/* 所在的团队 */
	.join-team {
		width: 750rpx;
		margin-top: $tab-card-heg;
		height: calc(100vh - #{$tab-card-heg});
		background-color: $color-bg;
		.team-msg {
			width: 100%;
			height: 205rpx;
			padding: 0 40rpx;
			margin-top: $spacing-col;
			display: flex;
			flex-direction: row;
			align-items: center;
			background-color: $color-white;
			.img {
				width: 90rpx;
				height: 90rpx;
				border-radius: $border-radius-circle;
			}
			.msg {
				flex: 1;
				padding-left: 29rpx;
				.t1 {
					margin-top: 20rpx;
					font-family: $font-family-num;
				}
			}
			.btn {
				color: $color-primary;
			}
		}
	}
</style>
